/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-10-14 16:13:47
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-10-15 10:38:16
 * @FilePath: /react18-vite-admin/src/components/ui/CustomDialog/CustomDialog.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Button, Modal, ModalProps, ConfigProvider } from 'antd';
import { ReactNode } from 'react';

import { useSettingsStore } from '@/store';

import './CustomDialog.global.scss';

const CustomDialog = (props: {
    children: ReactNode;
    title?: string;
    open: boolean;
    footer?: ModalProps['footer'];
    onClose: () => void;
}) => {
    const { title, children, open, footer, onClose } = props;

    const { cssVarObject } = useSettingsStore((state) => state);

    return (
        <ConfigProvider
            modal={{
                styles: {
                    content: {
                        padding: 0
                    }
                }
            }}
        >
            <Modal
                className="custom-dialog"
                style={{
                    ...cssVarObject
                }}
                title=""
                open={open}
                footer={footer ?? null}
                closable={false}
                onCancel={onClose}
                width="80vw"
            >
                <div
                    className="header flex flex-row items-center justify-between w-full"
                    style={{
                        background: 'var(--bg-front)'
                    }}
                >
                    <div className="flex flex-row items-center">
                        <div className="bar"></div>
                        <div className="fw700 text-base c-text1">{title}</div>
                    </div>
                    <Button type="primary" onClick={onClose}>
                        关闭
                    </Button>
                </div>
                <div className="body">{children}</div>
            </Modal>
        </ConfigProvider>
    );
};

export default CustomDialog;
